<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script type="text/javascript" src="../../static/js/admin.js"></script>-->
    <link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../static/css/app.css">
    <link rel="stylesheet" href="../../static/css/survey.css">
    <link rel="stylesheet" href="../../static/css/index.css">
</head>
<body>
<div>
</div>
<br>
<form enctype="multipart/form-data" method="post" class="layui-form" id="addForm">
    <div class="layui-form-item it">
        <label class="layui-form-label" style=" width: 110px">课程名称</label>
        <div class="layui-input-block">
            <input type="text" id="name" name="name" required lay-verify="required" placeholder="请输入课程名称"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label" style=" width: 110px">课程简介</label>
        <div class="layui-input-block">
            <textarea name="briefIntroduction" id="briefIntroduction" placeholder="请输入内容"
                      class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style=" width: 110px">课程封面</label>
        <div class="layui-input-block">
            <img height="85" id="courseI" width="85" src="../../static/images/frame.png"
                 onclick="selectImage('imageFile')">
            <input type="file" name="file" id="imageFile" onchange="preview(this,'courseI')" style="display:none;">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style=" width: 110px">课程价格</label>
        <div class="layui-input-block">
            <input type="number" id="price" step="0.01" name="price" required lay-verify="required"
                   placeholder="保留两位小数点" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style=" width: 110px">总课时</label>
        <div class="layui-input-block">
            <input type="number" id="totalClassHour" name="totalClassHour" required lay-verify="required"
                   placeholder="请输入总课时" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style=" width: 110px">课程描述</label>
        <div class="layui-input-block">
            <textarea name="remark" id="remark" placeholder="请输入课程描述"
                      class="layui-textarea"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label" style=" width: 110px">大纲图片</label>
        <div class="layui-input-block">

            <div id="remarkUrlT" style="display: inline-block"></div>

            <div style="width: 85px;height: 85px;display: inline-block;border:1px solid #c7c5c5" id="remarkUrl">
                <label>
                    <img style="width: 100%;height: 100%;display: block"
                         src="../../static/images/frame.png" onclick="addInputFile()">
                    <!--<input type="file" name="imageFiles" onchange="selectFile(this)"-->
                           <!--style="display:none;">-->
                </label>

            </div>

        </div>

    </div>
    <!--<div class="layui-form-item">-->
        <!--<label class="layui-form-label" style=" width: 110px">课件</label>-->
        <!--<div class="layui-input-block" style="line-height: 36px;">-->
            <!--<a onclick="openData()">音频课件</a>-->
        <!--</div>-->
    <!--</div>-->
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" type="submit" lay-filter="formDemo">保存</button>
            <input class="layui-btn" type="button" name="Submit" onclick="shutDown();" value="返回">
        </div>
    </div>
</form>
</body>
<script type="text/javascript" src="../../static/js/jquery.min.js"></script>

<script src="../../lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="../../static/js/admin.js"></script>
<script src="../../static/js/republic.js" charset="utf-8"></script>
<script>
    var jsessionid= localStorage.getItem("jsessionid")
    function selectFile(file,id,imgId) {
           var formData = new FormData()
        formData.append('imageFile',file.files[0]);
        if(imgId!=undefined){
            let inputUrl =   $('#remarkUrl'+imgId).children('input[name="imgurl"]')[0].value
            formData.append('url',inputUrl);
        }

        if (file.files && file.files[0]) {
            $.ajax({
                type: 'POST',
                url: serverUrl+'/KnowledgeCourseAction/uploadImage;jsessionid='+jsessionid,
                data: formData,
                mimeType: "multipart/form-data",
                contentType: false,
                cache: false,
                xhrFields: {
                    withCredentials : true
                },
                processData: false
            }).success((res)=>{
                if(imgId!=undefined){
                    $('#remarkUrl'+imgId).children('img')[0].src = 'http://r.chaojirenmai.vip/'+JSON.parse(res).data
                    $('#remarkUrl'+imgId).children('input[name="imgurl"]').attr('value',JSON.parse(res).data)
                }else {
                    setImg(JSON.parse(res).data)
                }
                $('#fileId'+id).remove()
            })

        }
    }

    function changeImage() {
        document.getElementById("remarkUrl").style.display = "none";
    }

    function addImage(url, id) {
        if ($("#" + id).attr('src')) {
            return false;
        } else {
            $("#" + id).attr("src", url);
            $("#" + id).removeAttr("style");
            return true;
        }
        // }

    }


    //         数组   大纲图片
    $('form').submit(function (event) {
        event.preventDefault();
        var form = $(this);
        var formData = new FormData(this);
        var imginput = $('#remarkUrlT').children('div').children('input')
        var inputSrt = ''
        for(var i=0;i<imginput.length;i++){
            inputSrt=inputSrt + imginput[i].value+';'
        }
        formData.append('remarkUrl',inputSrt)
        if (courseId > 0) {
            formData.set("id", courseId);
        }
        // remarkFiles


        $.ajax({
            type: form.attr('method'),
            url: serverUrl + '/KnowledgeCourseAction/save;jsessionid='+jsessionid,
            data: formData,
            mimeType: "multipart/form-data",
            contentType: false,
            cache: false,
            processData: false,
            xhrFields: {
                withCredentials: true
            },
        }).success(function (res) {
            //成功提交
            // alert(res);
            var json = eval("(" + res + ")");
            if (json.code == 0) {
                if (json.code == 0) {
                    layer.open({
                        // title: r.msg
                        content: "保存成功"
                        , btn: [' 确定', '取消'],
                        btn1: function () {
                            window.location.href = "./list2.html"
                        },
                        btn2: function () {
                            window.location.href = "./list2.html"
                        }
                    });
                }
            }
        }).fail(function (jqXHR, textStatus, errorThrown) {
            layer.open({
                // title: r.msg
                content: "保存失败"
                , btn: [' 确定', '取消'],
                btn1: function () {
                    window.location.href = "./list2.html"
                },
                btn2: function () {
                    window.location.href = "./list2.html"
                }
            });
        });

    });

    //返回保存图片
    var shutDown = function () {
        var formData = new FormData()
        var imginput = $('#remarkUrlT').children('div').children('input')
        var inputSrt = ''
        for(var i=0;i<imginput.length;i++){
            inputSrt=inputSrt + imginput[i].value+';'
        }
        if (courseId > 0) {
            formData.set("id", courseId);
        }
        formData.append('remarkUrl',inputSrt)

        $.ajax({
            type: 'POST',
            url: serverUrl + '/KnowledgeCourseAction/save;jsessionid='+jsessionid,
            data: formData,
            mimeType: "multipart/form-data",
            contentType: false,
            cache: false,
            processData: false,
            xhrFields: {
                withCredentials: true
            },
        }).success((res)=>{
            window.location.href = "./list2.html"
         })
    }



        var courseId;
    $(function () {
        var queryString = getQueryVariable('id');
        if (!queryString) {
            //新建
        } else {
            //编辑
            // alert(queryString);
            courseId = queryString;
            $.ajax({
                type: "GET",
                url: serverUrl + '/KnowledgeCourseAction/getCourseInfo/' + queryString +';jsessionid='+jsessionid,
                xhrFields: {
                    withCredentials: true
                },
                success: function (r) {
                    if (r.code == 0) {

                        $("#briefIntroduction").val(r.data.briefIntroduction);
                        $("#name").val(r.data.name);
                        $("#courseI").attr('src','http://r.chaojirenmai.vip/'+ r.data.imageUrl);
                        $("#price").val(r.data.price);
                        $("#totalClassHour").val(r.data.totalClassHour);
                        $("#remark").val(r.data.remark);
                        var remarkUrlImg = $('#remarkUrlT').children('div').children('img')

                        var str = r.data.remarkUrl;
                        var urls = str.split(";");
                        urls.pop()
                        if (!urls[0] == "") {

                            for (var i = 0; i <= urls.length - 1; i++) {

                                var id = "remarkUrl" + i;
                                // console.log( $('#'+id > img),'测试')
                                // $('#' + id).children('img:eq(0)').attr("src", urls[i]);
                                // $('#' + id).children('input:eq(0)').attr("value", urls[i]);
                                // remarkUrlImg[i].src
                                setImg(urls[i])

                                // $('#' + id).css('display', 'inline-block')
                                // document.getElementById(id).style.display = "";
                            }
                        }
                        // alert(r.data)
                        // document.location.href = "./index.html";
                    } else {
                        layer.msg(r.msg);
                    }
                },
            });
        }
        // alert(queryString);
        // 根据课程id   获取课程详情  url = /api/KnowledgeCourse/getCourList/{knowledgeCourseId}

    });

    //根据数据来生成图片
    let imgId = 0
    var imgRPurl= 'http://r.chaojirenmai.vip/'
    var setImg = function (url) {
        var imgBox = $('<div onclick="addInputFile('+imgId+')" id="' + 'remarkUrl' + imgId + '" style="width: 85px;height: 85px;display: inline-block;margin-right: 5px;position: relative"><img style="display:block;width: 100%;height: 100%" src="'+imgRPurl + url + '" alt=""> <span style="position: absolute;top: 0;right: 0;"><img src="../../static/images/shut.png" alt="" onclick="removeImg(' + 'remarkUrl' + imgId + ')" style="width: 20px;cursor: pointer;"></span><input name="imgurl" type="text" style="display: none" value="'+url+'"></div>')
        imgId++
        $('#remarkUrlT').append(imgBox)
        var remarkUrlChilren = $('#remarkUrlT').children('div')
        if (remarkUrlChilren.length > 8) {
            $('#remarkUrl').css('display', 'none')
        }

    }
    var removeImg = function (id) {
        event.stopPropagation()
        id.remove()
        var remarkUrlChilren = $('#remarkUrlT').children('div')
        if (remarkUrlChilren.length < 9) {
            $('#remarkUrl').css('display', 'inline-block')
        }
        // $('#'+id).remove()
    }
    //用弹层 打开音频页面
    var openData = function () {
        window.WeAdminShow('音频课件','./radioList.html?id='+ getQueryVariable('id'))
    }
    //动态生成 input flie 上传
    var fileId =0
    var addInputFile = function (imgId) {
       var inputFile= $('<input type="file"  accept="image/*" id="'+'fileId'+fileId+'" onchange="selectFile(this,'+fileId+','+imgId+')" style="display: none"> ')
        $('#remarkUrlT').append(inputFile)
        inputFile.click()
        fileId++
    }

</script>
</html>